<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .content {
            position: relative;
            width: 200px;
            height: 269px;
            margin: 100px auto;
            overflow: hidden;
        }

        .content #oul {
            position: absolute;
            left: 0;
            top: 0;
            width: 600px;
            height: inherit;
            z-index: 1;
        }

        .content li {
            float: left;
            width: 200px;
            height: 100%;
        }

        .content #oul:after {
            display: block;
            content: '';
            clear: both;
        }

        .content li img {

            width: 100%;
        }

        .nav {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            background-color: #ccc;
        }

        .nav.nav-left {
            left: 10px;
        }

        .nav.nav-right {
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">
            <ul id="oul">
                <li>
                    <img src="/projects/slide/img/0.jpg" alt="">
                </li>
                <li>
                    <img src="/projects/slide/img/1.jpg" alt="">
                </li>
                <li>
                    <img src="/projects/slide/img/2.jpg" alt="">
                </li>
            </ul>
        </div>
        <span class="nav nav-left">
            <</span>
                <span class="nav nav-right">></span>
    </div>
    <script type="text/javascript">
        (function (win, doc) {
            var defaultConfig = {
                time: 2000
            }
            var _timer
            var leftNav = document.querySelector('.nav-left')
            var rightNav = document.querySelector('.nav-right')
            var taSlide = function (options, ele) {
                return new taSlide.prototype.init(options, ele)
            }
            taSlide.fn = taSlide.prototype = {
                init: function (options, ele) {
                    this.config = this.extend(defaultConfig, options)
                    this.play(ele)
                    return this
                },
                extend: function (options, others) {
                    for (var key in others) {
                        if (others.hasOwnProperty(key)) {
                            options[key] = others[key]
                        }
                    }
                    return options
                },
                play: function (target) {
                    var self = this
                    _timer = setInterval(function () {
                        self.move(target, -200)
                    }, this.config.time)
                },
                stop: function () {
                    return function () {
                        clearInterval(_timer)
                    }
                },
                move: function (ele, offset) {
                    var newOffset = parseInt(ele.offsetLeft) + offset
                    ele.style.left = newOffset + 'px'

                    if (newOffset < -400) {
                        ele.style.left = 0
                    }
                    if (newOffset > 0) {
                        ele.style.left = -400 + 'px'
                    }
                },
                preBtn: function () {
                    var self = this
                    leftNav.addEventListener('click', function () {
                        self.move(target, 200)
                    }, false)
                },
                nextBtn: function () {
                    var self = this
                    rightNav.addEventListener('click', function () {
                        self.move(target, -200)
                    }, false)
                },
                initEvent: function () {
                    this.preBtn()
                    this.nextBtn()
                },
                enterSlider: function () {
                    target.addEventListener('mouseenter', function () {
                        self.stop()
                    }, false)
                },
                leaveSlider: function () {
                    target.addEventListener('mouseleave', function () {
                        self.play(target)
                    }, false)
                },
                addEvent: function (ele, event, callback) {
                    ele.addEventListener(event, function () {
                        callback()
                    }, false)
                }
            }
            taSlide.fn.init.prototype = taSlide.fn
            taSlide.fn.initEvent()
            win.taSlide = taSlide


        })(window, document)

        var target = document.querySelector('#oul')
        var taSlide = taSlide({
            time: 3000
        }, target)


        var aQuery = function (selector, context) {
            return aQuery.prototype.init();
        }
        aQuery.prototype = {
            init: function () {
                return this
            },
            name: function () {},
            age: function () {}
        }
    </script>
</body>

</html>